import { useMemo } from 'react';
import useLevelIcon from '@/common/useLevelIcon';
import AnchorIcon from '@/assets/images/live/room/anchor_icon.png';

const levelConfigList = [{
  nameColor: '#272d5a',
  backgroundColor: null,
}, {
  nameColor: '#3c51bf',
  backgroundColor: null,
}, {
  nameColor: '#3c51bf',
  backgroundColor: null,
}, {
  nameColor: '#3c51bf',
  backgroundColor: null,
}, {
  nameColor: '#c64fe3',
  backgroundColor: null,
}, {
  nameColor: '#c64fe3',
  backgroundColor: null,
}, {
  nameColor: '#bb1824',
  backgroundColor: '#fff4ea',
}, {
  nameColor: '#bb1824',
  backgroundColor: '#fff4ea',
}, {
  nameColor: '#89234b',
  backgroundColor: '#ffedf4',
}, {
  nameColor: '#89234b',
  backgroundColor: '#ffedf4',
}, {
  nameColor: '#89234b',
  backgroundColor: '#ffedf4',
}];

const MessageItemStyle = ({ data, children }) => {
  const { isUp, level } = data?.ext || {};

  const levelResult = useLevelIcon({
    levelList: useLevelIcon.levelList.map((row, index) => {
      const { nameColor, backgroundColor } = levelConfigList[index];
      return {
        icon: row.bigIcon,
        nameColor,
        backgroundColor,
      };
    }),
    level,
  });

  return useMemo(() => {
    if (isUp) {
      return children({
        icon: AnchorIcon,
        nameColor: '#ff4a30',
        backgroundColor: null,
      });
    }

    return children(levelResult);
  }, [data, children, levelResult]);
};

export default MessageItemStyle;
